﻿<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->

<head>
	<title>Home</title>
	<!-- Meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="shortcut icon" href="">
	<!-- Global CSS -->
	<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
	<!-- Plugins CSS -->
	<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">
	<!-- Theme CSS -->
	<link id="theme-style" rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
	<div id="container">
		<header class="header">
			<div class="top-bar container-fluid">
				<div class="actions">
					<a class="btn hidden-xs" @click="changeLanguage"><i class="fa fa-language" aria-hidden="true"></i>
						{{language}}
					</a>
					<a class="btn hidden-xs" :href="'mailto:' + basicInfo.email"><i class="fa fa-paper-plane" aria-hidden="true"></i>
						Hire Me
					</a>
					<a class="btn" href="#"><i class="fa fa-download" aria-hidden="true"></i> Download My Resume</a>
				</div>
				<!--//actions-->
				<ul class="social list-inline">
					<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-github-alt" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-skype" aria-hidden="true"></i></a></li>
				</ul>
				<!--//social-->
			</div>
			<!--//top-bar-->

			<div class="intro">
				<div class="container text-center">
					<img class="profile-image" src="assets/images/profile-image.png" alt="">
					<h1 class="name">{{basicInfo.name}}</h1>
					<div class="title">{{basicInfo.title}}</div>
					<div class="profile">
						<p>{{basicInfo.profileInfo}}</p>
					</div>
					<!--//profile-->
				</div>
				<!--//container-->
			</div>
			<!--//intro-->

			<div class="contact-info">
				<div class="container text-center">
					<ul class="list-inline">
						<li class="email"><i class="fa fa-envelope"></i><a :href="'mailto:' + basicInfo.email">{{basicInfo.email}}</a></li>
						<li><i class="fa fa-phone"></i> <a :href="'tel:' + basicInfo.mobile">{{basicInfo.mobile}}</a></li>
						<li class="website"><i class="fa fa-globe"></i><a :href="basicInfo.website" target="_blank">www.cnblogs.com</a></li>
					</ul>
				</div>
				<!--//container-->
			</div>
			<!--//contact-info-->

			<div class="page-nav-space-holder hidden-xs">
				<div id="page-nav-wrapper" class="page-nav-wrapper text-center">
					<div class="container">
						<ul id="page-nav" class="nav page-nav list-inline">
							<li><a class="scrollto" href="#skills-section">{{skills.navTitle}}</a></li>
							<li><a class="scrollto" href="#experiences-section">{{experiences.navTitle}}</a></li>
							<li><a class="scrollto" href="#projects-section">{{projects.navTitle}}</a></li>
							<li><a class="scrollto" href="#portfolio-section" v-if="portfolio && portfolio.portfolios">{{portfolio.navTitle}}</a></li>
							<li><a class="scrollto" href="#eudcation-section">{{education.navTitle}}</a></li>
							<li><a class="scrollto" href="#contact-section">{{contact.navTitle}}</a></li>
						</ul>
						<!--//page-nav-->
					</div>
				</div>
				<!--//page-nav-wrapper-->
			</div>

		</header>
		<!--//header-->

		<div class="wrapper container">
			
			<section id="skills-section" class="skills-section section text-center">
				<h2 class="section-title">{{skills.sectionTitle}}</h2>
				<div class="top-skills">
					<!--<h3 class="subtitle">Top Skills</h3>-->
					<div class="row">
						<div class="item col-xs-12 col-sm-4" v-for="topSkill in skills.topSkills">
							<div class="item-inner">
								<div class="chart-easy-pie text-center">
									<div class="chart-theme-1 chart" :data-percent="topSkill.percent"><span>{{topSkill.percent}}</span>%</div>
								</div>
								<h4 class="skill-name">{{topSkill.name}}</h4>
								<div class="level">{{topSkill.level}}</div>
								<!--<div class="desc">{{topSkill.desc}}</div>-->
							</div>
							<!--//item-inner-->
						</div>
					</div>
					<!--//row-->
				</div>
				<!--//top-skills-->

				<!--
				<div class="other-skills">
					<h3 class="subtitle">Other Skills</h3>
					<div class="misc-skills">
						<span class="skill-tag" v-for="otherSkill in skills.otherSkills">{{otherSkill.name}}</span>
					</div>
				</div>-->
				<!--//other-skills-->
				
				<div class="skill-items">
					<div class="skill-item" v-for="skillItem in skills.skillItems">
							<span>{{skillItem.name}}</span>
					</div>
				</div>
			</section>

			<!--//skills-section-->
			<section id="experiences-section" class="experiences-section section">
				<h2 class="section-title">{{experiences.navTitle}}</h2>
				<div class="timeline">
					<div class="item" v-for="work in experiences.workExperiences">
						<div class="work-place">
							<h3 class="place">{{work.place}}</h3>
							<div class="location"><i class="fa fa-map-marker" aria-hidden="true"></i>{{work.location}}</div>
						</div>
						<div class="job-meta">
							<div class="title">{{work.title}}</div>
							<div class="industry">{{work.industry}}</div>
							<div class="time">{{work.time}}</div>
						</div>
						<!--//job-meta-->
						<div class="job-desc">
							<p>{{work.jobDesc}}</p>
						</div>
						<!--//job-desc-->
					</div>
					<!--//item-->
				</div>
				<!--//timeline-->
			</section>
			<!--//section-->

			<section id="projects-section" class="experiences-section section">
				<h2 class="section-title">{{projects.navTitle}}</h2>
				<div class="timeline">
					<div class="item" v-for="project in projects.projectExperiences">
						<div class="work-place">
							<h3 class="place">{{project.name}}</h3>
							<div class="location"><i class="fa fa-map-marker" aria-hidden="true"></i>{{project.location}}</div>
						</div>
						<div class="job-meta">
							<div class="title">{{project.title}}</div>
							<div class="industry">{{project.industry}}</div>
							<div class="time">{{project.time}}</div>
						</div>
						<!--//job-meta-->
						<div class="job-desc">
							<!--<span class="job-sub-title">{{projects.projectEnv}}</span>-->
							<p>{{project.env}}</p>
						</div>
						<div class="job-desc">
							<span class="job-sub-title">{{projects.projectDesc}}</span>
							<p>{{project.desc}}</p>
						</div>
						<div class="job-desc">
							<span class="job-sub-title">{{projects.responsibilityDesc}}</span>
							<p>{{project.responsibility}}</p>
						</div>
						<!--//job-desc-->
					</div>
					<!--//item-->
				</div>
				<!--//timeline-->
			</section>
			<!--//section-->

			<section id="portfolio-section" class="portfolio-section section" v-if="portfolio.portfolios">
				<h2 class="section-title">{{portfolio.sectionTitle}}</h2>
				<ul id="filters" class="filters clearfix">
					<li class="type active" data-filter="*">All</li>
					<li class="type" v-for="category in portfolio.categories" :data-filter="'.' + category.name" >{{category.title}}</li>
				</ul>
				<!--//filters-->
				<div class="items-wrapper isotope row" v-if="portfolio.categories">
					<div :class="'item ' + portfo.category + ' col-md-3 col-xs-6' " v-for="portfo in portfolio.portfolios">
						<div class="item-inner">
							<figure class="figure">
								<img class="img-responsive" :src="portfo.img" alt="" />
							</figure>
							<div class="content text-left">
								<h3 class="sub-title"><a target="_blank" href="portfo.url">{{portfo.title}}</a></h3>
								<div class="technique">{{portfo.technique}}</div>
								<div class="desc"><a target="_blank" :href="portfo.url">{{portfo.desc}}</a></div>
							</div>
							<!--//content-->
							<a class="link-mask" target="_blank" :href="portfo.url"></a>
						</div>
						<!--//item-inner-->
					</div>
				</div>
				<!--//item-wrapper-->

			</section>
			<!--//section-->

			<section id="eudcation-section" class="education-section section">
				<h2 class="section-title">{{education.sectionTitle}}</h2>
				<div class="row">
					<div class="item col-xs-12 col-sm-4" v-for="education in education.educations">
						<div class="item-inner">
							<h3 class="degree">{{education.educationBody}}</h3>
							<div class="education-body">
								{{education.degree}}
							</div>
							<!--//education-body-->
							<div class="time">{{education.time}}</div>
							<div class="desc">
								{{education.desc}}
							</div>
						</div>
						<!--//item-inner-->
					</div>
				</div>
				<!--//row-->
			</section>
			<!--//section-->

			<section id="contact-section" class="contact-section section">
				<h2 class="section-title">{{contact.sectionTitle}}</h2>
				<div class="intro">
					<img class="profile-image" src="assets/images/profile-image.png" alt="">
					<div class="dialog">
						<p>{{contact.notice}}</p>
						<p><strong>{{contact.provideServices}}</strong></p>
						<ul class="list-unstyled service-list">
							<li v-for="serv in contact.services"><i class="fa fa-check" aria-hidden="true"></i> {{serv.name}}</li>
						</ul>
						<p>{{contact.message}} <a :href="'mailto:' + basicInfo.email">{{basicInfo.email}}</a> 
							{{contact.call}} <a :href="'tel:' + basicInfo.mobile">{{basicInfo.mobile}}</a>
							{{contact.thanks}}
						</p>
						<ul class="social list-inline">
							<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-github-alt" aria-hidden="true"></i></a></li>
							<li><a href="#"><i class="fa fa-skype" aria-hidden="true"></i></a></li>
						</ul>
						<!--//social-->
					</div>
					<!--//diaplog-->
				</div>
				<!--//intro-->

			</section>
			<!--//section-->

		</div>
		<!--//wrapper-->

		<footer class="footer text-center">
			<div class="container">
				<small class="copyright">Copyright &copy; 2018.Brilliant All rights reserved. 
					<a href="https://gitee.com/liuge1988/brilliant" target="_blank">{{basicInfo.sourceCode}}</a></small>
					{{basicInfo.authorTitle}}:<a href="https://www.cnblogs.com/xifengxiaoma/" target="_blank">{{basicInfo.authorValue}}</a> 
			</div>
			<!--//container-->
		</footer>

	</div>

	<!-- Javascript -->
	<script type="text/javascript" src="assets/plugins/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
	<script type="text/javascript" src="assets/plugins/jquery-scrollTo/jquery.scrollTo.min.js"></script>
	<script type="text/javascript" src="assets/plugins/easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
	<script type="text/javascript" src="assets/plugins/imagesloaded.pkgd.min.js"></script>
	<script type="text/javascript" src="assets/plugins/isotope.pkgd.min.js"></script>
	<script type="text/javascript" src="assets/plugins/vue.min.js"></script>
	

	<!-- custom js -->
	<script type="text/javascript" src="assets/js/main.js"></script>

	<!-- Style Switcher (REMOVE ON YOUR PRODUCTION SITE) -->
	<script src="assets/js/demo/style-switcher.js"></script>
	
	<script type="text/javascript">
		function en_us(data) {
			window.localStorage.setItem("en_us", JSON.stringify(data))
		}
		function zh_cn(data) {
			window.localStorage.setItem("zh_cn", JSON.stringify(data))
			var vm = new Vue({
				name: 'resume',
				el: '#container',
				data: {
					lang:'zh_cn',
					language:null,
					basicInfo:null,
					experiences:null,
					projects:null,
					education:null,
					skills:null,
					portfolio:null,
					contact:null
				},
				methods: {
					changeLanguage: function () {
						var zh_cn = 'zh_cn'
						var en_us = 'en_us'
						if(this.lang == zh_cn) {
							this.lang = en_us
							this.language = "Chinese"
						} else {
							this.lang = zh_cn
							this.language = "英文简历"
						}
						var data = window.localStorage.getItem(this.lang)
						if(data != null) {
							data = JSON.parse(data)
							this.basicInfo = data.basicInfo
							this.experiences = data.experiences
							this.projects = data.projects
							this.education = data.education
							this.skills = data.skills
							this.portfolio = data.portfolio
							this.contact = data.contact
						}
					}
				},
				mounted:function(){
					this.changeLanguage()
				}
			})
		}
	</script>
	
	<script src="assets/language/en_us.json"></script>
	<script src="assets/language/zh_cn.json"></script>
</body>

</html>